<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>task1_1_1</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<section>
		<header>
			<h1>网站一级标题</h1>
			<ul>
				<li><a href="">导航链接一</a></li>
				<li><a href="">导航链接二</a></li>
				<li><a href="">导航链接三</a></li>
				<li><a href="">导航链接四</a></li>
			</ul>
		</header>
		
		<div id="one">
			<article>
				<h2>文章一级标题</h2>
				<h3>文章二级标题</h3>
				<p>
					<br> 这是长段落
					<br> 如果有来生， 
					<br> 要做一棵树， 
					<br> 站成永恒， 
					<br> 没有悲欢的姿势。 
					<br> 一半在土里安详， 
					<br> 一半在风里飞扬， 
					<br> 一半洒落阴凉， 
					<br> 一半沐浴阳光， 
					<br> 如果有来生 
					<br> 要做一只鸟 
					<br> 飞越永恒 
					<br> 没有迷途的苦恼 
					<br> 东方有火红的希望 
					<br> 南方有温暖的巢床 
					<br> 向西逐退残阳 
					<br> 向北唤醒芬芳
					<br> <br>作者：<a href="http://baike.baidu.com/link?url=RxD9AS8vXLlLsg3JDg8n5kUhCkLixL1OlspPnkBYWApOvmtLj7sOXrA2ZT7p0iTsjplc8jVLSs2R1nKxTDPot1Z3akJtzyL1I6VhrDaEJIC">三毛</a>
				</p>
					<img id="san" src="https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=0fb8ea4529738bd4d02cba63c0e2ecb3/7dd98d1001e93901f43318a67cec54e736d19671.jpg" alt="三毛照片">
				
			</article>
		</div>
		

		<div id="two" >
			<h4>图片</h4>
			<figure>
				<figcaption>好看的图片</figcaption>
				<img src="xzq.png" alt=""> <br>
			</figure>
			<figure>
				<figcaption>好看的图片</figcaption>
				<img src="xzq.png" alt=""> <br>
			</figure>
			<figure>
				<figcaption>好看的图片</figcaption>
				<img src="xzq.png" alt=""> <br>
			</figure>
			<figure>
				<figcaption>好看的图片</figcaption>
				<img src="xzq.png" alt=""> <br>
			</figure>
		</div>
			

		<div id="three" >
				文章发表时间
			<ol>
				<li>排名1</li>
				<li>排名2</li>
				<li>排名3</li>
			</ol>

			
			下面为一个表格
			<table border="1" cellspacing="0" >
				<tr>
					<th>表头</th>
					<th>表头</th>
					<th>表头</th>
				</tr>
				<tr>
					<td>表格内容</td>
					<td>表格内容</td>
					<td>操作</td>
				</tr>
				<tr>
					<td>表格内容</td>
					<td>表格内容</td>
					<td>操作</td>
				</tr>
				<tr>
					<td>表格内容</td>
					<td>表格内容</td>
					<td>操作</td>
				</tr>
				<tr>
					<td>总计</td>
					<td colspan="2">1000</td>
				</tr>		
			</table>
		</div>
		
		<div id="four" >
			<h4>以下为侧栏以及 侧栏标题</h4>
			<form action="">
				<div>

					
					<label for="email"> <span class='explain' >请输入邮箱地址：</span><input id="email" type="email"></label>
					 <span id="alert" > 邮箱格式请按要求填写</span>
					<label for="pass1"><span class='explain'>请输入密码：</span><input  id="pass1" type="password" required ></label> <br>
					<label for="pass2"><span class='explain'>请重复密码：</span><input id="pass2" type="password" required ></label> <br>
					
					<span class='explain'>性别：</span>
					<input type="radio" name="sex" checked>男 
					<input type="radio" name="sex"  >女 <br>

					<span class='explain'>城市：</span>
					<select name="city" id="">
						<option value="北京">北京</option>
						<option value="西安" selected >西安</option>
						<option value="上海">上海</option>
						<option value="杭州">杭州</option>
					</select><br>
					
					<span class='explain'>爱好：</span>
					<input type="checkbox" name="city" >篮球
					<input type="checkbox" name="city" >足球
					<input type="checkbox" name="city" >羽毛球
					<input type="checkbox" name="city" >网球 <br>
					
					<span class='explain'>个人描述：</span>
					<textarea name="message" id="" cols="30" rows="10"></textarea>
				</div>
				
				<input id="submit" type="submit" value="确认提交">
			</form>
			
		</div>
		<footer>
			版权所有&copy;	
		</footer>
	</section>
	
</body>
</html>